import React, { ReactElement, useEffect } from 'react';

import { NavigationScreenProps } from 'react-navigation';
import Provider from './reducer';
import styles from './style';
import Notch, { NotchType } from '../../components/Notch';
import { back, getYutouCoinNum, setSpuList } from './actions';
import NavBar from '../../components/NavBar';
import Container from './components/Container';

export default ({ navigation }: NavigationScreenProps): ReactElement => {
  const productId = navigation.getParam('productId', 0);
  const skuIds = navigation.getParam('skuIds', []);
  const spuList = navigation.getParam('spuList', []);

  useEffect((): (() => void) => {
    getYutouCoinNum();

    setSpuList(spuList);

    const willFocusSubscription = navigation.addListener(
      'willFocus',
      getYutouCoinNum
    );

    return (): void => {
      willFocusSubscription.remove();
    };
  }, [navigation, productId, skuIds, spuList]);

  return (
    <Provider>
      <Notch style={styles.container} type={NotchType.TopAndBottom}>
        <NavBar
          title="订单确认"
          backAction={(): void => {
            back();
          }}
          needLine
        />
        <Container />
      </Notch>
    </Provider>
  );
};
